<template>
  <!-- 员工日志-->
  <div class="EmployeeDiary">
    <div class="side_1"></div>
    <span class="add_1">员工日志</span>
    <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="Fh">返回</el-button>
    <div class="body">
      <el-table
        :data="tableData"
        stripe
        style="width:100%"
        height="660"
        @filter-change="handleFilterChange"
      >
        <el-table-column prop="xuhao" label="序号" width="80" align="center"></el-table-column>
        <el-table-column
          :filters="empList"
          column-key="creater"
          label="员工"
          prop="creater"
          align="center"
        ></el-table-column>
        <el-table-column
          :filters="[{ text: '日计划', value: 1 },{ text: '周计划', value: 2 },{ text: '月计划', value: 3 }]"
          column-key="type"
          label="计划类型"
          prop="type"
          align="center"
        ></el-table-column>
        <el-table-column prop="createOn" label="时间" align="center"></el-table-column>
        <el-table-column prop="main" label="工作计划" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="WorkLogDetail(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="current"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </template>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  components: {
  },
  computed: {
    //  autoHeightTable() {
    //     return document.documentElement.scrollHeight - 251 - 82;
    //   }
  },
  data () {
    return {
      tableData: [
      ],
      total: 0,
      current: 1,
      pagesize: 15,
      ids: [],
      typeList: [],
      empList: [],
      creater: 0,
    }
  },
  created () {
    this.creater = JSON.parse(localStorage.getItem("message")).Id;
    this.getempList();
    this.getData(0);
  },
  methods: {
    // 当talbel中任何一列的过滤条件点击确定和覆盖时，都会触发此事件。
    handleFilterChange (filters) {
      if (filters.creater != undefined) { if (filters.creater.length > 0) { this.ids = filters.creater; } else { this.ids = []; } }
      if (filters.type != undefined) { if (filters.type.length > 0) { this.typeList = filters.type; } else { this.typeList = []; } }
      this.getData(0);
    },
    //获取员工
    getempList () {
      var obj = { creater: this.creater };
      var objs = JSON.stringify(obj);
      console.log(objs, "empList")
      axios(
        "/apis/MyCenter.asmx/GetData?index=1&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        if (list.length > 0) {
          for (var i = 0; i < list.length; i++) {
            this.empList.push({ text: list[i].name, value: list[i].id });
          }
        }
      })
    },
    getData (page) {
      var obj =
      {
        pn: page,
        PerPageSize: this.pagesize,
        typeList: this.typeList,
        empList: this.ids,
        creater: this.creater
      }
      var objs = JSON.stringify(obj); let the = { index: 9, jsondata: objs };
      console.log(objs)
      axios.post("/apis/MyCenter.asmx/GetData", the).then(({ data }) => {
        var list = JSON.parse(data.d);
        console.log(list)
        this.total = list.count;
        this.tableData = list.data;
      }
      )

    },
    WorkLogDetail (e) {
      this.$router.push({ path: './WorkLogDetail', query: { e: e } })
    },
    Fh () {
      window.history.go(-1);
    },

    // 分页
    handleCurrentChange (e) {
      this.getData(e - 1);
    },
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/base.scss';

.side_1 {
  width: 5px;
  height: 16px;
  background-color: $Header_color;
  margin-left: 10px;
  margin-top: 30px;
}
.add_1 {
  margin-left: 20px;
  margin-top: -20px;
  float: left;
  font-size: 18px;
  font-weight: 400;
}
.btn_fanhui {
  margin-top: -20px;
  margin-right: 20px;
  float: right;
}
.body {
  width: 98%;
  background-color: $white;
  margin-left: 10px;
  margin-top: 40px;
}
.el-pagination {
  text-align: center;
  margin-top: 15px;
}
</style>